Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use css3 for showing/hiding the loading bar and spinner. #322

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

apottere
Copy link

@apottere apottere commented Sep 7, 2016

I recently had an issue with the loading bar flashing before it faded in, so I updated the bar to use css3 transitions instead of $animate for fade in/out. This seems to work just like it did before, and it simplified the css a little.

The bar and spinner are now only inserted the first time _start is called, and shown/hidden by adding/removing the active class. Unfortunately, ngAnimate can't quite be removed as a dependency since we still need a cleanup promise from $animate.removeClass, but at least it's used minimally.

I couldn't get the tests to run, however... npm install && grunt build resulted in the following error:

Everything seems ok in the example project, though, so I'm going to start using this fork in the hopes that this will get merged eventually.

I forgot to bower install, checking the tests now.

@apottere
Copy link
Author

apottere commented Sep 7, 2016

I ended up removing $animate altogether - at the cost of using a $timeout to remove the DOM elements after the css animation finishes. $animate.removeClass would have been ideal, but it was not returning a promise under test, and it resolves immediately if you don't have ngAnimate in your app. To make $timeout less painful, I added a configuration option to set the fade duration.

I encapsulated the parts of the service that are transient - now it's easier to understand what gets thrown out when the timeout in .complete() is called. This means the elements are created every time .start() is called and there isn't an active bar, which means there's no confusion when one bar is fading and another is started - the new one has new DOM elements and fades in right on top.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant